<template>
  <div class="wrap-container">
    <div class="search_box">
      <div class="search_tit">会员查询</div>
      <el-form :inline="true" label-position="left" label-width="76px">
        <el-form-item label="会员姓名">
          <el-input clearable v-model="queryParams.username" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="会员类型">
          <el-select filterable v-model="queryParams.type" placeholder="请选择" clearable>
            <el-option
              :label="item.dictLabel"
              :value="item.dictValue"
              v-for="item in dictTypeList"
              :key="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员卡号">
          <el-input clearable v-model="queryParams.username" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="注册日期">
          <el-date-picker
            v-model="queryParams.submitTime"
            type="date"
            placeholder="请选择提交日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="queryParams.contactPhone" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="queryParams.contactPhone" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <div class="tabs_box">
        <el-tabs v-model="tabsVal" @tab-click="handleClick">
          <el-tab-pane
            :label="`${item.label}`"
            :name="item.value"
            v-for="item in tabsList"
            :key="item.value"
          >
            <template #label> {{ item.label }} ({{ item.count }}) </template>
          </el-tab-pane>
        </el-tabs>
        <div class="handle_btn">
          <el-button class="del_btn" type="primary" @click="goAddStadium">新增会员</el-button>
          <el-button class="del_btn" @click="handleDel(1)">批量删除</el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="ID" prop="id" />
        <el-table-column label="昵称" prop="stadiumName" show-overflow-tooltip />
        <el-table-column label="姓名" prop="enterpriseName" show-overflow-tooltip />
        <el-table-column label="性别" prop="stadiumTypeName" width="120" />
        <el-table-column label="身份证号" prop="address" width="240" show-overflow-tooltip />
        <el-table-column label="手机号码" prop="contactPerson" width="120" />
        <el-table-column label="会员卡号" prop="contactPhone" width="120" />
        <el-table-column label="会员类型" prop="contactPhone" width="120" />
        <el-table-column label="会员等级" prop="contactPhone" width="120" />
        <el-table-column label="会员状态" prop="approval" width="120">
          <template #default="{ row }">
            <span style="color: #0988fb" v-if="row.state == 0">正常</span>
            <span style="color: #d43030" v-else-if="row.state == 2">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="注册日期" prop="createTime" width="150" />
        <el-table-column label="操作" width="160">
          <template #default="{ row }">
            <div class="table_btn">
              <el-button class="primary_text" type="text" @click="handleDetail(row.id)"
                >查看</el-button
              >
              <el-button type="text" @click="handleDetail(row.id)">编辑</el-button>
              <el-button type="text" @click="handleDel(0, row.id)">冻结</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listData } from '@/api/system/dict/data'
import {
  delStadium,
  countStadiumApproval,
  listApprovalStadium,
  getAreaTree,
} from '@/api/stadium/stadium'

interface DictType {
  dictLabel: string
  dictValue: string
}

interface AreaNode {
  id: number
  label: string
  children?: AreaNode[]
}

interface QueryParams {
  pageNum: number
  pageSize: number
  stadiumName: string | null
  stadiumType: string | null
  submitTime: string | null
  contactPerson: string | null
  contactPhone: string | null
  stateId: number | null
  cityId: number | null
  districtId: number | null
  username?: string | null
  type?: string | null
}

interface TabsItem {
  label: string
  value: string
  count: number
}

interface TableItem {
  id: string
  stadiumName: string
  enterpriseName: string
  stadiumTypeName: string
  contactPerson: string
  contactPhone: string
  createTime: string
  state?: number
  address?: string
  approval?: string
}

const router = useRouter()

const loading = ref<boolean>(false)
const dictTypeList = ref<DictType[]>([])
const areaTree = ref<AreaNode[]>([])
const addressId = ref<number[]>([])
const total = ref<number>(0)
const tableData = ref<TableItem[]>([])
const multipleSelection = ref<TableItem[]>([]) //表格多选的值

const tabsList = ref<TabsItem[]>([
  { label: '全部', value: '-1', count: 0 },
  { label: '正常', value: '0', count: 0 },
  { label: '冻结', value: '1', count: 0 },
])

const tabsVal = ref<string>('-1')

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
  stadiumName: null,
  stadiumType: null,
  submitTime: null,
  contactPerson: null,
  contactPhone: null,
  stateId: null,
  cityId: null,
  districtId: null,
})

// 订单列表
const getList = async () => {
  loading.value = true
  const res = await listApprovalStadium({
    ...queryParams,
    ...{ approval: tabsVal.value == '-1' ? '' : tabsVal.value },
  })
  tableData.value = res.rows
  total.value = res.total
  loading.value = false
}

// 订单统计
const getCount = async () => {
  const { data } = await countStadiumApproval(queryParams)
  if (tabsList.value[0]) tabsList.value[0].count = data.countAll
  if (tabsList.value[1]) tabsList.value[1].count = data.countDsh
  if (tabsList.value[2]) tabsList.value[2].count = data.countYwc
  if (tabsList.value[3]) tabsList.value[3].count = data.countBh
}

//获取场馆类型
const getDictTypeList = async () => {
  const params = {
    pageNum: 1,
    pageSize: 99,
    dictType: 'site_type',
  }
  const res = await listData(params)
  dictTypeList.value = res.rows
}

// 获取省市区数据
const getArea = async () => {
  const { data } = await getAreaTree()
  areaTree.value = data
}

// 省市区选择
const handleChange = (value: number[]) => {
  queryParams.stateId = value[0] ?? null
  queryParams.cityId = value[1] ?? null
  queryParams.districtId = value[2] ?? null
}

// 查询
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
  getCount()
}

// 重置
const reset = () => {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    stadiumName: null,
    stadiumType: null,
    submitTime: null,
    contactPerson: null,
    contactPhone: null,
    stateId: null,
    cityId: null,
    districtId: null,
  })
  getList()
  getCount()
}

// 选项卡切换
const handleClick = () => {
  queryParams.pageNum = 1
  getList()
}

// 表格多选
const handleSelectionChange = (val: TableItem[]) => {
  multipleSelection.value = val
}

// 查看详情
const handleDetail = (id: string) => {
  router.push({
    path: '/member/detail',
    query: { id },
  })
}

// 删除
const handleDel = (type: number, id?: string) => {
  let ids = ''
  if (type == 1) {
    ids = multipleSelection.value.map((item) => item.id).join(',')
  } else {
    ids = id || ''
  }
  if (ids == '') {
    ElMessage.error('请选择要删除的数据')
    return
  }
  ElMessageBox.confirm('是否确认删除选中的数据项？')
    .then(() => {
      return delStadium(ids)
    })
    .then(() => {
      getList()
      getCount()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

const formatter = (row: TableItem, column: any, cellValue: any) => {
  // 如果单元格值为空或为 null，返回 '--'
  return cellValue || '--'
}

// 新增场馆
const goAddStadium = () => {
  router.push({ path: '/stadium/add' })
}

onMounted(() => {
  getList()
  getCount()
  getDictTypeList()
  getArea()
})
</script>

<style lang="scss" scoped>
.search_box {
  padding-bottom: 0;
}
.table_box {
  position: relative;
  padding-top: 6px;
  .tabs_box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 15px;
    :deep(.el-tabs) {
      flex: 1;
      .el-tabs__header {
        margin: 0;
      }
    }
  }
  .handle_btn {
    margin-left: 35px;
    .el-button {
      padding: 0;
      width: 90px;
      height: 35px;
      line-height: 35px;
    }
  }
}
:deep(.el-table .el-table__body td .cell .line-limit-length:empty::after) {
  content: '--';
}
</style>
